<template>
  <div class="about">
    <el-amap
      ref="map"
      :vid="'amapDemo'"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
      mapStyle='amap://styles/dark'
    >
    <el-amap-marker v-for="(u,i) in markers" :position="u.position" :key="i"></el-amap-marker>
    <!-- 设置地图的显示样式-->
    </el-amap>
  </div>
</template>
<script>
export default {
  data() {
    return {
      center: [121.5273285, 31.21515044],
      zoom: 12,
      position: [121.5273285, 31.21515044],
      icon: "/huoche.png",
      events: {
        init(o) {
          console.log(o.getCenter(),666);
          
        },
        zoomchange: (e) => {
          console.log(e);
        },
        // 缩放比例
        zoomend: (e) => {
          //获取当前缩放zoom值
          console.log(e);
        },
        // 点击地图
        click: (e) => {
          alert("map clicked");
          console.log(e);
          
        },
      },
      markers: [
        {
          position: [121.5273285, 31.41515044],
        },
        {
          position: [121.5273286, 31.31515045],
        },
      ],
      //使用其他组件
      plugin: [
        {
          pName: "Scale",
          events: {
            // 组件初始化
            init(instance) {
              console.log(instance);
            },
          },
        },
        {
          pName: "ToolBar",
          events: {
            // init(instance) {
            //   console.log(instance);
            // },
          },
        },
      ],
    };
  },
  created(){
    
  }
};
</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.amap-demo{
  width: 100%;
  height: 600px;
}
</style>
